<template>
	<view>
		<u-navbar title="店铺详情" >
			<view class="right" slot="right" style="margin-right: 20upx;">
				<image @click="toChat" src="../../../static/img/icon_serveic.png"></image>
			</view>
		</u-navbar>
		<view class="topBox">
		<view class="top">
			<view class="left">
				<view class="title">
					<image :src="merchantHead" mode=""></image>
					<text>{{shopName}}</text>
				</view>
				<view class="pingfen" @click="makeCall(phone)">
					<image src="../../../static/img/phoneCall.png" mode="" ></image>
					<text>{{phone}}</text>
					<!-- <view>1321651651615</view> -->
				</view>
			</view>
			<!-- <button class="btn" @click="attention" v-if="!IsFllow">关注</button>
			<button class="btn avtive" @click="attention" v-else>已关注</button> -->
		</view>
		<view class="search">
			<image src="../../../static/img/searchicon.png" @click="toPage(0,'/pages/search/search')"></image>
			<view class="items" :class="{status: current == 0}" @click="onChange(0)">推荐</view>
			<!-- <view class="items" :class="{status: current == 1}" @click="onChange(1)">新品</view>
			<view class="items" :class="{status: current == 2}" @click="onChange(2)">视频</view> -->
		</view>
		</view>
		<scroll-view scroll-y="true" :style="{height:height+'px'}" @scrolltolower='scrolltolower'>
			<view class="goodsBox">
				<!-- 瀑布流 -->
				<u-waterfall v-model="flowList">
					<template v-slot:left="{leftList}">
						<view class="box" style="margin-right: 10upx;">
							<view class="items" @click="toPage(0,'/pages/goodsDetail/index?goodsId='+item.id)" v-for="(item, index) in leftList" :key="index+item">
								<image :src="item.detailsImgList[0]" mode="widthFix"></image>
								<view class="content">
									<view class="title">
										<view>{{item.goodsName}}</view>
									</view>
									<view class="bottom">
										<view class="left">￥<text class="price">{{item.unitPrice}}</text></view>
										<view class="right">销量:{{item.sales}}</view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="box" style="margin-left: 10upx;">
							<view class="items" @click="toPage(0,'/pages/goodsDetail/index?goodsId='+item.id)" v-for="(item, index) in rightList" :key="index+item">
								<image :src="item.detailsImgList[0]" mode="widthFix"></image>
								<view class="content">
									<view class="title">
										<view>{{item.goodsName}}</view>
									</view>
									<view class="bottom">
										<view class="left">￥<text class="price">{{item.unitPrice}}</text></view>
										<view class="right">销量:{{item.sales}}</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
			<u-loadmore :status="status" bg-color="rgba(255,255,255,0)" margin-top='15' margin-bottom='15' :loadText="loadText"/>
		</scroll-view>
	</view>
</template>

<script>
	import * as api from '@/api/user/index.js';
	export default {
		data() {
			return {
				loadText: {
					loadmore: '获取数据错误,点击重新加载',
					loading: '加载中',
					nomore: '已经到底啦'
				},
				status: 'loading',
				height: 0,
				starNUm: 3,
				current:0,
				count: 6,
				flowList: [],
				goodList: [
					{
						price: '120.00',
						marketPrice: '￥1520',
						wholesale: '￥210.00',
						number: 1420,
						title: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						Imgurl: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
						id: 15
					},
					{
						price: '120.00',
						marketPrice: '￥1520',
						wholesale: '￥210.00',
						number: 1420,
						title: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						Imgurl: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
						id: 1
					},
					{
						price: '120.00',
						marketPrice: '￥1520',
						wholesale: '￥210.00',
						number: 1420,
						title: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						Imgurl: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
						id: 12
					},
					{
						price: '120.00',
						marketPrice: '￥1520',
						wholesale: '￥210.00',
						title: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						Imgurl: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
						id: 11
					},
					{
						price: '120.00',
						marketPrice: '￥1520',
						wholesale: '￥210.00',
						title: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						Imgurl: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
						id: 10
					},
					{
							price: '120.00',
							marketPrice: '￥1520',
							wholesale: '￥210.00',
							number: 1420,
							title: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
							Imgurl: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
							id: 15
						},
						{
								price: '120.00',
								marketPrice: '￥1520',
								wholesale: '￥210.00',
								number: 1420,
								title: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
								Imgurl: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
								id: 15
					},
				],
				parmas:{
					merchantId:'',
					pageNum:1,
					pageSize:20
				},
				IsFllow:false,
				shopName:'',
				merchantHead:''
			}
		},
		onLoad(option) {
			console.log(option.id)
			this.parmas.merchantId = option.id;
			this.shopName = option.name;
			this.merchantHead = option.merchantHead;
			this.phone = option.phone;
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".topBox");
					info.boundingClientRect(function(data) { //data - 各种参数
						that.height = res.windowHeight - data.height
					}).exec()
				}
			});
		},
		onShow(){
			this.getGoodsList();
		},
		methods: {
			makeCall(number) {
				uni.makePhoneCall({
				    phoneNumber: number //仅为示例
				});
			},
			attention() {
				this.IsFllow ? this.IsFllow = false : this.IsFllow = true;
			},
			scrolltolower() {
				console.log('到底了啦');
				this.getGoodsList();
			},
			async getGoodsList() {
				try{
					const ret = await api.getGoodsByMerchant(this.parmas)
					if(ret.data.obj.length < this.parmas.pageSize) {
						this.status = 'nomore'
					}else{
						this.parmas.pageNum++;	
					}
					console.log(ret)
					this.goodList = ret.data.obj;
					this.addRandomData()
				}catch(error) {
					console.log(error)
				}
			},
			backPage() {
				uni.navigateBack({
				    delta: 2
				});
			},
			onChange(val){
				this.current = val
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toChat(){
				uni.navigateTo({
					url:"/pages/notice/chat?name="+ this.shopName
				})
			},
			addRandomData() {
				// for(let i = 0; i < this.goodList.length; i++) {
				// 	let index = this.$u.random(0, this.goodList.length - 1);
				// 	// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
				// 	let item = JSON.parse(JSON.stringify(this.goodList[index]))
				// 	item.id = this.$u.guid();
				// 	this.flowList.push(item);
				// }
				this.flowList = this.goodList
			},
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>
